<template>
  <h1>数据列表图片</h1>
  <div class="box">
    <div id="box1" style="width: 600px; height: 400px"></div>
    <div id="box2" style="width: 600px; height: 400px"></div>
</div>

</template>



<script setup lang="ts">
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { CandlestickChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { onMounted } from 'vue';
import { BarChart } from 'echarts/charts';

echarts.use([GridComponent, CandlestickChart, CanvasRenderer,BarChart]);
onMounted(() => {

  echarts.use([GridComponent, CandlestickChart, CanvasRenderer]);
  
  const box1: HTMLElement = document.getElementById("box1") as HTMLElement;
var myChart = echarts.init(box1);

//var chartDom = document.getElementById('box1');

var option;

option = {
  xAxis: {
    data:  ["2021-11-15", "2021-11-16", "2021-11-17", "2021-11-18"]
  },
  yAxis: {},
  series: [
    {
      type: 'candlestick',
      data: [
      [20, 34, 10, 38],
              [40, 35, 30, 50],
              [31, 38, 33, 44],
              [38, 15, 5, 42],
      ]
    }
  ]
};

option && myChart.setOption(option);
const box2: HTMLElement = document.getElementById("box2") as HTMLElement;
var myChart = echarts.init(box2);
// var chartDom = document.getElementById('box2');
// var myChart = echarts.init(chartDom);
var option1;
option1 = {
  xAxis: {
    type: 'category',
    data: ['星期一', '星期而', '星期三', '星期四', '星期五', '星期六', '星期日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

option && myChart.setOption(option1);


})

</script>

<style scoped>
.box{
  display: flex;
  width: 100%;
  height: 100%;
  
}

</style>